<template>
  <div>
    <!-- 全选所有店铺的复选框 -->
    <el-checkbox :indeterminate="isIndeterminateAll" v-model="checkAllShops" @change="handleCheckAllShopsChange">所有店铺</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <!-- 循环遍历店铺列表 -->
    <div v-for="shop in shops" :key="shop.id">
      <div>
        <!-- 全选单个店铺的复选框 -->
        <el-checkbox :indeterminate="shop.isIndeterminate" v-model="shop.checkAll" @change="handleCheckAllProductsChange(shop)">{{ shop.name }}</el-checkbox>
      </div>
      <!-- 该店铺的商品列表 -->
      <el-checkbox-group v-model="shop.checkedProducts" @change="handleCheckedProductsChange(shop)">
        <el-checkbox v-for="product in shop.products" :label="product" :key="product">{{ product }}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',

  data() {
    return {
      checkAllShops: false,  // 控制是否全选所有店铺
      shops: [
        {
          id: 1,
          name: '店铺1',
          checkAll: false,  // 控制是否全选该店铺的所有商品
          checkedProducts: [],  // 已选中的商品列表
          products: ['商品1', '商品2', '商品3'],  // 商品列表
          isIndeterminate: false  // 控制复选框的半选状态
        },
        {
          id: 2,
          name: '店铺2',
          checkAll: false,
          checkedProducts: [],
          products: ['商品4', '商品5', '商品6'],
          isIndeterminate: false
        }
      ],
      isIndeterminateAll: false  // 控制全选所有店铺复选框的半选状态
    };
  },

  methods: {
    // 当全选所有店铺复选框状态改变时触发
    handleCheckAllShopsChange(val) {
      this.shops.forEach(shop => {
        shop.checkAll = val;  // 更新店铺的全选状态
        shop.checkedProducts = val ? shop.products.slice() : [];  // 更新已选中的商品列表
        shop.isIndeterminate = false;  // 取消半选状态
      });
      this.updateCheckAllShopsState();  // 更新全选所有店铺的状态
    },

    // 当全选单个店铺复选框状态改变时触发
    handleCheckAllProductsChange(shop) {
      shop.checkedProducts = shop.checkAll ? shop.products.slice() : [];  // 更新该店铺的已选中的商品列表
      shop.isIndeterminate = false;  // 取消该店铺的半选状态
      this.updateCheckAllShopsState();  // 更新全选所有店铺的状态
    },

    // 当单个店铺的商品选中状态改变时触发
    handleCheckedProductsChange(shop) {
      const checkedCount = shop.checkedProducts.length;  // 计算已选中的商品数量
      shop.checkAll = checkedCount === shop.products.length;  // 更新该店铺的全选状态
      shop.isIndeterminate = checkedCount > 0 && checkedCount < shop.products.length;  // 更新该店铺的半选状态
      this.updateCheckAllShopsState();  // 更新全选所有店铺的状态
    },

    // 更新全选所有店铺的状态
    updateCheckAllShopsState() {
      const totalShops = this.shops.length;
      const checkedShopsCount = this.shops.filter(shop => shop.checkAll).length;  // 计算已全选的店铺数量
      const anyShopIndeterminate = this.shops.some(shop => shop.isIndeterminate || (shop.checkedProducts.length > 0 && shop.checkedProducts.length < shop.products.length));
      this.checkAllShops = checkedShopsCount === totalShops;  // 更新全选所有店铺的全选状态
      this.isIndeterminateAll = !this.checkAllShops && (checkedShopsCount > 0 || anyShopIndeterminate);  // 更新全选所有店铺的半选状态
    }
  }
};
</script>
